Elyse Rivera
Portfolio
about me.
Elyse Rivera
Current Student -
Aspiring UX/UI Designer
Hello.
I’m a junior studying Computer Science at Montclair State University, and my goal after graduation is to become a UX/UI designer or front-end developer, as I’m very passionate about web design and user experience.
portfolio.
An Authors Website Case Study.
Overview
Role
Freelance
Product and Brand Designer
Lead UI Design, Lead UX Design, Research, Rapid Prototyping, User Flows, Logo Design.
Platform
Timeline
Status
Deliverables
Web
2024 - Current
Shipped to Production
Design
User Flow, Wireframes, Design System, Branding, Visual Design, Logo
Overview
My father is a writer and needed a website to help launch his first novel Pivotal Universe. I gladly accepted with the hopes of designing something that could capture the Sci-Fi feel that is often reflected in his work.
Overall my goal was to create a polished, fully functioning interface that was sure to inform and draw in prospective readers.
Highlights
Miguel Rivera Books User Interface
Visual Components
The Challenge
Problem Framing
Oftentimes, authors new to the literary business tend to have unfinished and/or underdeveloped websites. Moreover, this results from lackluster resources they may have otherwise had, had they been more accomplished in their fields. Having a messy site layout could reduce user-interface interaction, causing them to skim past important information. Because they’re navigating pages with far greater difficulty than they would have had with a professionally curated website--users may click-out of the website prematurely, resulting in a loss of book sales.
Overall, an author's website must do two things: rally new audiences into buying books and spread the word to draw in prospective business partners.
In this case, the hard-hitting issue that was occurring was the lack of book sales--despite copies being sold externally and positive interaction from the authors’ readers. Keeping note of all of the aforementioned problems--my website had to be eye catching, user friendly, and memorable.
Pinpointing Issues
1. Books Sold Externally
If viewers want to buy books, they are directed to external book retailers.
2. Lack of Notoriety
The author is relatively new to the literary business and lacks a built in audience.
3. Unpolished Interfaces
4. Maintaining Viewer Attention
New writers' websites are often unfinished or underdeveloped.
The website needed to be able to inform readers and capture their attention.
5. New Developer
At the time I had never designed a website before.
The Solution
Goals
At the time, I had previously designed layouts for presentations, books, and other such things, but never a website. In order to make a more comprehensive design, I did research surrounding wireframes and UX/UI design. I looked into other authors' websites in order to discover what necessary features the website was going to require.
Ultimately, the solution to many of the challenges I was faced with when creating this website was simply researching and creating a strong design/layout. Trial and error is what propelled my rough draft into a full-fledged, comprehensive website.
High Level Goals
1. Navigation
Making the website layout easy to navigate with plenty of links to the novel.
2. Choosing the Right Words
3. Branding/Design
Having a good summary/book excerpt that can entice perspective readers.
Having a strong website design and brand identity that can resonate with viewers.
4. Visual Engagement
Creating original art that simulates the readers imagination and provides a visual representation of the novel.
5. Research
Thoroughly researching both top selling and indie authors alike, as well as studying websites and UX/UI design.
Research Summary
Market Insight & Competitor Analysis
In order to gain a better understanding of what interface features worked, I analyzed other authors' websites. My research focused on both seasoned and up and coming writers alike.
George R.R. Martin
Pro
-
A lot of love and personal details are put in from the writer himself.
-
Manages to capture that fantasy essence.
-
There is a lot to explore on his site which is great for curious fans.
Con
-
Outdated Interface.
-
Slightly difficult to navigate.
Author of Game of Thrones.
George R.R. Martin Website
Andy Weir Website
Andy Weir
New York Times best selling Sc-Fi Author.
Pro
-
Simple Interface, everything is on one page.
-
You can get to any piece of information from the fixed navigation bar on top.
-
Sections are limited to books, about, and contact.
Con
-
Limited information is available on his website.
-
Everything is a bit too zoomed in on desktop.
L.A. Wilson
Author at Koehler Books.
Pro
-
Socials are always readily accessible.
-
The website shares what it needs to without overwhelming the reader.
Con
-
Confusing layout(Text was often uncentered).
-
Overly simplistic design.
L.A. Wilson Website
Greg Fields Website
Greg Fields
Author and Editor at Koehler Books.
Pro
-
The praise for his novels are on main page.
-
Everything I could possibly want to know can be found.
Con
-
Website lacks personal brand identity.
-
Text is often skewed to the left when it should be centered.
Design Process
Tools
Figma
Wix
Github
Procreate
Design Review
Mood Board
Pivotal Universe is a gritty Sc-Fi adventure novel, which inspired me to incorporate dark and striking colors to invoke that feel. I wanted Miguel Rivera Books to have a futuristic aesthetic that matched the energy of the actual novel. To better help articulate the visual direction of the site and its branding, I created a mood board.
Ideation
In order to better define my ideas and concepts for this website, I had to narrow down exactly what that meant into broader categories.
1. Visuals
Visually giving the website an aesthetic that is able to invoke a sense of excitement and curiosity.
2. Organization
Organizing the website in a way that can inform viewers on the book and successfully gain perspective readers.
3. Creative Expression
Providing an outlet for the author to be able to creatively express themselves in the website.
4. Connections
Creating a way to connect the viewers with the author.
First Phase MVP Features:
-
Insights into the author.
-
Book information and where to buy.
-
Short stories section.
-
Contact page.
Future Roadmap:
-
Lore tab for quick insights into book specific characters, settings, and species.
-
Authors blog section.
-
Book reviews sections.
-
Discussion guide.
Wireframing
I created wireframes in order to better visualized the final product and experiment with the interface’s layout.
Featured:
Landing Page, Book Information Page, Book Excerpt Page, Original Short Stories Page, About the Author Page, and Contact Page.
Wireframes
Visual Elements
Components
Visual Components
Typography
Avenir Light
Pacifica Condensed
Braggadocio
Palatino Linotype
Typography Fonts
Color Palette
Color Pallet
Branding & Illustration
Header Image
Page Strip Image
Some original illustrations I created for the website based on the book.
Developer Handoff
As the designer I brought this projects to life by implementing my designs via Wix. Developing this project in Wix was the best choice for this project given the limited time I was granted. Regardless I was still able to deliver on a fully functioning website prior to my Dads book release.
Reflection
Key Take Aways
1. Planning
Planning the user flow and design system ahead of time, accelerates the development process.
2. Design
Custom illustrations elevate the websites quality.
3. Researching
Learning from other authors websites, provides a better understanding of key requirements.
4. Simplicity
Making the site user friendly creates a more successful product.
Next Steps
-
Working on website expansion including but not limited to a blog page, an authors praise section, discussion guide, and a lore explanation page.
-
Creating more original illustrations for the website.
-
Analyzing site data and conducting user interview to help improve user experience.
-
Possibly changing the site theme for up and coming books.
-
Adding CSS components.
Overall I had a lot of fun creating this website and am very happy with the outcome. As I had mentioned previously, this had been my first ever attempt at designing a website. Originally I set out with the goal providing this website with a fully functional, well thought out website, and I believe I delivered on that aspect. I believe coming out of this experience has made me a more knowledgeable and dynamic UX/UI Designer. Moving forward I’m very excited to continue working on this website and begin more ambitious projects in the future!
Lastly, but most importantly of all, my client (A.KA my Dad) was happy with the website :D
Thank you for checking out my project!
